{% extends 'web_base.html' %}
{% load staticfiles %}
{% block title %}
    商品详情页
{% endblock %}
{% block css_js %}
    <link rel="stylesheet" href={% static "css/detail.css" %}>
    {#    <script src={% static "js/detail.js" %}></script>#}

{% endblock %}



{% block web_body %}
    <div class="container">
        <ul class="breadcrumb">
            <li><a href={% url 'goods:index' %}>首页</a></li>
            <li><a href={% url 'goods:goods_sort' goods.type 1 %}>{{ goods.type }}</a></li>
            <li>{{ goods.name }}</li>
        </ul>
        <div class="detail">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-6">
                        <img src={{ goods.image.url }} alt="" class="img-responsive">
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <h3>{{ goods.name }}</h3>
                        <p>{{ goods.desc }}</p>
                        <span class="price">¥{{ goods.price }}</span>
                        {% csrf_token %}
                        <button class="join">加入购物车</button>

                    </div>
                </div>
                <div class="detail_list">
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active">
                            <a href="#home" data-toggle="tab">
                                描述
                            </a>
                        </li>
                        <li><a href="#ios" data-toggle="tab">评价</a></li>

                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="home">
                            <p>{{ goods.desc }}</p>
                        </div>
                        <div class="tab-pane fade" id="ios">
                            <div class="comment">
                                {% for goods_order in goods_orders %}
                                    <span>{{ goods_order.order.user.username }}在{{ goods_order.order.create_time }}说： {{ goods_order.comment }} </span><br>
                                    {% empty %}
                                    空
                                {% endfor %}


                            </div>
                        </div>

                    </div>
                </div>
                <div class="relevant">
                    <h4>相关产品</h4>
                    <div class="row">
                        {% for rel in relate %}
                            <div class="col-sm-6 col-xs-6 col-lg-3">
                                <a href="{% url 'goods:goods_detail' rel.id %}" class="thumbnail">
                                    <img src={{ rel.image.url }} alt="{{ rel.name }}">
                                    <p>{{ rel.desc }}</p>
                                    <span>¥{{ rel.price }}</span>
                                </a>
                            </div>

                        {% endfor %}


                    </div>
                </div>
            </div>
        </div>

        <span class="ball hidden-sm hidden-xs"></span>

    </div>


{% endblock %}
{% block end_js %}
    <script>
        $(function () {
            var ball = $('.ball');
            var join = $('.join');
            var badge = $('.badge');
            var cart = $('.cart');


            join.click(function () {

                // 点击join的时候，小球在的位置

                csrf = $('input[name="csrfmiddlewaretoken"]').val();
                params = {'goods_id': {{ goods.id }}, 'csrfmiddlewaretoken': csrf};
                $.post('/computer/cart/cart_add/', params, function (data) {

                    if (data.res == 4) {
                        var ball_joinX = join.offset().left + join.outerWidth() / 2 - ball.outerWidth() / 2;
                        var ball_joinY = join.offset().top;
                        ball.css({'left': ball_joinX, 'top': ball_joinY});
                        ball.show();
                        // 点击join后，小球所在位置
                        var ball_inX = cart.offset().left + cart.outerWidth() / 2 - join.outerWidth() / 2;
                        var ball_inY = cart.offset().top - cart.outerWidth() / 2;
                        ball.animate({'left': ball_inX, 'top': ball_inY}, function () {
                            $(this).fadeOut()
                            badge.html(data.total_count)
                        })

                    } else {
                        alert(data.errmsg)
                    }
                });


            })

        })
    </script>
{% endblock %}


